<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>系统excel模版管理</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:10px;">
        <!--      end-->
        <el-table :data="arryList"
                  height="400"
                  :stripe="tableStyle.tableStripe"
                  :border="tableStyle.tableBorder"
                  tooltip-effect="dark"
                  ref="table">
          <el-table-column :key="1" label="模版名称" prop="name" align="center"></el-table-column>
          <el-table-column :key="2" label="下载" align="center">
            <template slot-scope="scope">
              <i class="el-icon-download" @click="donwload(scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              :key="3"
              v-if="showEdit">
            <template slot-scope="scope">
              <el-button size="small" @click="modleId=scope.row.id,addVisible=true">编辑模版</el-button>
              <el-button type="danger" size="small" @click="handleDetel(scope.row.id)" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button v-if="showEdit" size="small" @click="addVisible=true" type="primary" plain>新增模版</el-button>
      </div>
    </div>
    <addExcelModle :visible.sync="addVisible" :modleId="modleId" @InitFn="InitFn"></addExcelModle>
    <iframeDown :fileSrc="fileDown" v-if="showDownStatus"></iframeDown>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import {excelTemplateIndex, excelTemplateDelete} from "@/api/admin/system"

export default {
  name: 'studentMultiple',
  props: ['visible'],
  data() {
    return {
      dialogVisible: this.visible,
      addVisible: false,
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      modleId: 0,
      showDownStatus: false,
      fileDown: '',
      showEdit: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if(document.domain==='120.78.123.136' || document.domain==='http://xiaosenlin.xmtranscend.cn'){
          this.showEdit = true
        }
        this.InitFn()
      }
    }
  },
  created() {
  },
  methods: {
    donwload(option) {
      console.log('option:', option)
      let that = this
      this.showDownStatus = false
      this.fileDown = {src: option.file, name: option.name, type: 'excelModle'}
      setTimeout(() => {
        that.showDownStatus = true
      }, 200)
    },
    // 初始化
    async InitFn() {
      // let data = await this.$fetch(this.api.admin_student_index, this.searchForm)
      excelTemplateIndex().then(res => {
        console.log('res:', res)
        this.arryList = res.list;
      })
    },
    // 提交数据
    async uploadExcelModule() {
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    handleDetel(id) {
      let that = this
      this.$confirm('确认删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        excelTemplateDelete({id: id}).then(res => {
          if (!res.code) {
            that.InitFn()
          }
        })
      }).catch(() => {
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-boxin {
  min-width: 700px;
}
</style>
